<template>
  <div style="padding: 30px">
    <a-table
      :data-source="page.data"
      bordered
      :loading="loading"
      :pagination="{
        pageSize: page.pageSize,
        current: page.pageNo,
        total: page.totals,
      }"
      @change="changeData"
    >
      <!-- <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
        {{ record.description }}
      </p> -->
      <a-table-column
        key="number"
        data-index="number"
        title="区块高度"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            {{ record.number }}
          </span>
        </template>
      </a-table-column>
      <a-table-column
        key="timestamp"
        data-index="timestamp"
        title="上链时间"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            {{ record.timestamp }}
          </span>
        </template>
      </a-table-column>
      <a-table-column
        key="hash"
        data-index="hash"
        title="区块HASH"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            <router-link
              :to="{ name: 'Block', query: { hash: record.hash } }">
              {{ record.hash }}
            </router-link>
              <a-icon type="copy" @click="copy(record.hash)"/>
            <!-- <a @click="toBlock(record.hash)">{{ record.hash }}</a> -->
          </span>
        </template>
      </a-table-column>
      <a-table-column
        key="txCount"
        data-index="txCount"
        title="交易数量"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span v-if="record.txCount > 0">
            <router-link
              :to="{ name: 'Block', query: { hash: record.hash } }"
              >{{ record.txCount }}</router-link
            >
            <!-- <a @click="toBlock(record.hash)">{{ record.txCount }}</a> -->
          </span>
          <span v-else>
            {{ record.txCount }}
          </span>
        </template>
      </a-table-column>
    </a-table>
  </div>
</template>
<script>
import Constant from "../utils/Constant";
import Mixin from "../components/Mixin.vue";
export default {
  mixins: [Mixin],
  data() {
    return {
      loading: false,
      page: {
        pageNo: 1,
        pageSize: 10,
        pages: 0,
        totals: 0,
        data: [],
      },
    };
  },
  created() {
    this.getBlocks(1);
    this.$eventbus.$emit("selectMenu", { name: "Blocks"});
  },
  methods: {
    getBlocks(pageNo) {
      let url = Constant.BLOCK_INFOS_URL + pageNo;
      url += "?pageSize=" + this.page.pageSize;
      this.loading = true;
      this.$http.get(url).then(
        (resp) => {
          // console.log(resp);
          if (resp.data.code == "01") {
            this.page.data = resp.data.result.content;
            this.page.pageNo = resp.data.result.pageable.pageNumber + 1;
            this.page.pageSize = resp.data.result.pageable.pageSize;
            this.page.pages = resp.data.result.totalPages;
            this.page.totals = resp.data.result.totalElements;
          } else {
            this.$message.error(resp.data.message);
          }
          this.loading = false;
        },
        (err) => {
          console.log(err);
          this.loading = false;
        }
      );
    },
    changeData(data) {
      console.log(data);
      this.getBlocks(data.current);
    },
    toBlock(txHash) {
      console.log(txHash);
      this.$router.push({
        name: "Block",
        params: {
          hash: txHash,
        },
      });
    },

  },
};
</script>
